<template>
    <dialog-info ref="refIndexDialogInfo" class="dialog_info_wrap index_dialog_info" :isShowFotter="false">
        <!-- 标题 -->
        <template #DialogTitle>
            <span>{{ currentData.networkType }} 指标 - {{ currentData.cellName }}</span>
        </template>
        <!-- 内容 -->
        <template #DialogContainer>
            <div class="dialog_wrap">
                <div class="search_wrap">
                    <el-date-picker v-model="detailDatePicker" type="daterange" style="width: 350px;margin-right: 30px;"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        align="right"></el-date-picker>

                    <el-button type="primary" icon="Search" @click="getIndexData">查询</el-button>
                </div>

                <div class="index4g_wrap index_wrap" v-if="currentData.networkType === '4G'">
                    <div class="anchor_wrap">
                        <ul>
                            <li v-for="(item, index) in cardColumnTitle.card4GColumnTitle" :key="index">
                                <span ref="spans" @click="jump(index, $event)">
                                    {{ item }}
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="index_cont" @scroll="onScroll" v-loading="indexFlag">
                        <card4G-data-list-0 class="scroll-item" :indexCardTitle="'4GMR结构指标-小区(天)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-1 class="scroll-item" :indexCardTitle="'4G边缘速率性能表-华为(天)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-2 class="scroll-item" :indexCardTitle="'4G视频分辨率指标_小区(天)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-3 class="scroll-item" :indexCardTitle="'LTE高干扰小区清单(天级)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-4 class="scroll-item" :indexCardTitle="'LTE基础性能统计_小区(流量自忙时)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-5 class="scroll-item" :indexCardTitle="'LTE基础性能统计_小区(天)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-6 class="scroll-item" :indexCardTitle="'LTE网络MRO数据-小区(天)'"
                            :rowsData="rowsData" />
                        <card4G-data-list-7 class="scroll-item" :indexCardTitle="'SEQ_VOLTE基础性能_小区(天)'"
                            :rowsData="rowsData" />
                    </div>
                </div>
                <div class="index5g_wrap index_wrap" v-if="currentData.networkType === '5G'">
                    <div class="anchor_wrap">
                        <ul>
                            <li v-for="(item, index) in cardColumnTitle.card5GColumnTitle" :key="index">
                                <span ref="spans" @click="jump(index, $event)">
                                    {{ item }}
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="index_cont" @scroll="onScroll" v-loading="indexFlag">
                        <card5G-data-list-0 class="scroll-item" :indexCardTitle="'5GMR结构指标-小区(天)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-1 class="scroll-item" :indexCardTitle="'5G高干扰小区清单(天级)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-2 class="scroll-item" :indexCardTitle="'5G网络MRO指标表-小区(天)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-3 class="scroll-item" :indexCardTitle="'5G驻留比小区详单(天)表'"
                            :rowsData="rowsData" />
                        <card5G-data-list-4 class="scroll-item" :indexCardTitle="'NRCUDU私有性能统计表-小区（天）'"
                            :rowsData="rowsData" />
                        <card5G-data-list-5 class="scroll-item" :indexCardTitle="'NRCUDU性能统计表-小区(天)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-6 class="scroll-item" :indexCardTitle="'NRCUDU性能统计-小区(流量自忙时)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-7 class="scroll-item" :indexCardTitle="'SEQ_NRSA视频指标_小区(天)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-8 class="scroll-item" :indexCardTitle="'SEQ_NRSA页面指标_小区(天)'"
                            :rowsData="rowsData" />
                        <card5G-data-list-9 class="scroll-item" :indexCardTitle="'SEQ_VONR_5G语音感知指标_小区(天)'"
                            :rowsData="rowsData" />
                    </div>
                </div>
            </div>
        </template>
    </dialog-info>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { apiCommon, formatDateNormal } from "@/utils/index.js";
import * as qualityApi from "@/api/biz/networkQuality";
import mittBus from "@/utils/mittBus"; // mitt事件总线

// 组件 - 4g指标
import Card4GDataList0 from "./4g/Card4GDataList0.vue";
import Card4GDataList1 from "./4g/Card4GDataList1.vue";
import Card4GDataList2 from "./4g/Card4GDataList2.vue";
import Card4GDataList3 from "./4g/Card4GDataList3.vue";
import Card4GDataList4 from "./4g/Card4GDataList4.vue";
import Card4GDataList5 from "./4g/Card4GDataList5.vue";
import Card4GDataList6 from "./4g/Card4GDataList6.vue";
import Card4GDataList7 from "./4g/Card4GDataList7.vue";
// 组件 - 5g指标
import Card5GDataList0 from "./5g/Card5GDataList0.vue";
import Card5GDataList1 from "./5g/Card5GDataList1.vue";
import Card5GDataList2 from "./5g/Card5GDataList2.vue";
import Card5GDataList3 from "./5g/Card5GDataList3.vue";
import Card5GDataList4 from "./5g/Card5GDataList4.vue";
import Card5GDataList5 from "./5g/Card5GDataList5.vue";
import Card5GDataList6 from "./5g/Card5GDataList6.vue";
import Card5GDataList7 from "./5g/Card5GDataList7.vue";
import Card5GDataList8 from "./5g/Card5GDataList8.vue";
import Card5GDataList9 from "./5g/Card5GDataList9.vue";

const router = useRouter();
const { proxy } = getCurrentInstance();

const refIndexDialogInfo = ref(null);

let activeStep = 0

const currentData = ref({});

const rowsData = ref({})

let indexFlag = ref(true);

// 时间选择器(默认当天往前一周)
var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + 1);

const datePicker = ref("");
const detailDatePicker = ref("");
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
const defaultDateRange = [new Date(), currentDate];
datePicker.value = defaultDateRange;
detailDatePicker.value = [start, end];

const cardColumnTitle = {
    // 4g指标标题
    card4GColumnTitle: [
        '4GMR结构指标-小区(天)',
        '4G边缘速率性能表-华为(天)',
        '4G视频分辨率指标_小区(天)',
        'LTE高干扰小区清单(天级)',
        'LTE基础性能统计_小区(流量自忙时)',
        'LTE基础性能统计_小区(天)',
        'LTE网络MRO数据-小区(天)',
        'SEQ_VOLTE基础性能_小区(天)',
    ],
    // 5g指标标题
    card5GColumnTitle: [
        '5GMR结构指标-小区(天)',
        '5G高干扰小区清单(天级)',
        '5G网络MRO指标表-小区(天)',
        '5G驻留比小区详单(天)表',
        'NRCUDU私有性能统计表-小区（天）',
        'NRCUDU性能统计表-小区(天)',
        'NRCUDU性能统计-小区(流量自忙时)',
        'SEQ_NRSA视频指标_小区(天)',
        'SEQ_NRSA页面指标_小区(天)',
        'SEQ_VONR_5G语音感知指标_小区(天)',
    ]
}

mittBus.on("setIndexFlag", (value) => {
    indexFlag.value = value
});

const jump = (index, e) => {
    // console.log(index, e)

    // 侧边栏样式
    let titleDom = document.querySelectorAll(".anchor_wrap ul li")
    titleDom.forEach((item, i) => {
        item.classList.remove('selected')
    })
    if (index && e) {
        e.target.parentNode.classList.add('selected')
    } else {
        titleDom[0].classList.add('selected')
    }

    // 滚动
    let items = document.querySelectorAll(".scroll-item");
    if (!index) {
        items[0].scrollIntoView({
            block: "start", // 默认跳转到顶部
            behavior: "smooth" // 滚动的速度
        });

        return
    }
    for (var i = 0; i < items.length; i++) {
        if (index === i) {
            items[i].scrollIntoView({
                block: "start", // 默认跳转到顶部
                behavior: "smooth" // 滚动的速度
            });
        }
    }
}

const onScroll = (e) => {
    let scrollItems = document.querySelectorAll(".scroll-item");
    for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
            e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
            activeStep = i;
            break;
        }
    }
}

const getIndexData = () => {
    rowsData.value = {
        cgi: currentData.value.cgi,
        createStart: formatDateNormal(detailDatePicker.value[0]),
        createEnd: formatDateNormal(detailDatePicker.value[1])
    }

    switch (currentData.value.networkType) {
        case '4G':
            mittBus.emit("get4GIndexItemData", rowsData.value)
            break;
        case '5G':
            mittBus.emit("get5GIndexItemData", rowsData.value)
            break;
    }

};

/**
 * 业务
 */
const show = (val) => {
    rowsData.value = {
        cgi: val.cgi,
        createStart: formatDateNormal(detailDatePicker.value[0]),
        createEnd: formatDateNormal(detailDatePicker.value[1])
    }
    currentData.value = val

    refIndexDialogInfo.value.show();
    refIndexDialogInfo.value.setDialogWidth('92%');

    nextTick(() => {
        setTimeout(() => {
            jump()
        }, 300);
    })
};

defineExpose({
    show,
});
</script>

<style lang="scss" scoped>
.dialog_info_wrap {
    .dialog_wrap {
        .search_wrap {
            margin-bottom: 15px
        }

        .index_wrap {
            display: flex;
            justify-content: space-between;

            .anchor_wrap {
                width: 21%;
                height: 100%;
                overflow: auto;

                ul {
                    width: 95%;

                    li {
                        margin-bottom: 3px;
                        padding: 0 10px;
                        min-height: 30px;
                        font-size: 13px;
                        line-height: 30px;
                        cursor: pointer;
                        transition: .3s linear;

                        span {
                            display: block;
                            width: 100%;
                            height: 100%;
                            transition: .5s;
                        }

                        &:hover,
                        &.selected {
                            background: #409eff;
                            border-radius: 5px;

                            span {
                                // background: #f00;
                                color: #fff;
                                transition: .3s linear;
                            }
                        }

                        &:hover {
                            span {
                                padding-left: 10px;
                            }
                        }
                    }
                }
            }

            .index_cont {
                flex: 1;
                height: 65vh;
                overflow: auto;
                scrollbar-width: none;

                .el-card {
                    cursor: pointer;

                    &:not(:last-child) {
                        margin-bottom: 20px;
                    }

                    :deep .el-table {
                        .el-table__header {
                            // background: #f00;
                        }
                    }
                }
            }
        }
    }
}
</style>

<style lang="scss">
.index_dialog_info {
    margin-top: 5vh !important;
    max-height: 92vh;
    // overflow: hidden;

    .el-dialog__header {}

    .el-dialog__body {
        padding-top: 15px;
    }

    .el-dialog__footer {}
}
</style>